---
import CaptchaFields from '../components/Captcha/CaptchaFields.astro';
import CaptchaScripts from '../components/Captcha/CaptchaScripts.astro';
import Divider from '../components/Login/Divider.astro';
import GithubLogin from '../components/Login/GithubLogin.astro';
import GoogleLogin from '../components/Login/GoogleLogin.astro';
import EmailLoginForm from '../components/Login/EmailLoginForm';
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout
  title='Signup - roadmap.sh'
  description='Register yourself to receive occasional emails about new roadmaps, updates, guides and videos'
  permalink={'/signup'}
  noIndex={true}
>
  <div class='container'>
    <div
      class='mx-auto flex flex-col items-start justify-start py-12 sm:max-w-[400px] sm:items-center sm:justify-center'
    >
      <div class='mb-2 text-left sm:mb-5 sm:text-center'>
        <h1 class='mb-2 text-3xl font-semibold sm:mb-4 sm:text-5xl'>Login</h1>
        <p class='text-md block text-gray-600 sm:block'>
          Welcome back! Login to your account.
        </p>
      </div>

      <div class='flex w-full flex-col items-stretch space-y-2'>
        <GithubLogin />
        <GoogleLogin />
      </div>

      <Divider />

      <EmailLoginForm client:load />

      <div class='mt-6 text-center text-sm text-slate-600'>
        Don't have an account?{' '}
        <a href='/signup' class='font-medium text-blue-700 hover:text-blue-600'>
          Sign up</a
        > / <a
          href='/forgot-password'
          class='font-medium text-blue-700 hover:text-blue-600'
          >Forgot password?</a
        >
      </div>
    </div>
  </div>

  <CaptchaScripts slot='after-footer' />
</BaseLayout>

<script>
  import Cookies from 'js-cookie';
  import { TOKEN_COOKIE_NAME } from '../lib/constants';
  const token = Cookies.get(TOKEN_COOKIE_NAME);
  if (token) {
    window.location.href = '/';
  }
</script>
